<template>
  <div class="container">
    <div class="appSelect">
      <label>所属租户</label>
      <el-select
        size="mini"
        v-model="value"
        placeholder="请选择"
        @change="selectChange"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="action">
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="addConfigItem"
        >新增</el-button
      >
    </div>
    <div style="height: calc(100% - 66px);">
      <baseTable :tableSetting="tableSettingParam" ref="tableParam"></baseTable>
    </div>
    
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      :width="'30%'"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <fieldset>
        <legend>配置项</legend>
        <editForm
          :formConfig="formConfig"
          ref="editForm"
          :formData="editFormData"
        ></editForm>
      </fieldset>
    </dialogPublic>
  </div>
</template>

<script>
import {
  getConfigDetailList,
  addConfigDetail,
  updateConfigDetail,
  deleteConfigDetail,
} from "@/api/systemManagement/configManagement.js";
import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";
export default {
  props: {
    selectId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      show: false,
      title: "",
      options: [],
      value: "",
      appId:"",
      appList:{},
      tableSettingParam: {
        column: [
          {
            label: "所属租户",
            textAlign: "center",
            prop: "appid",
            formatter:(row)=>{
              return this.appList[row.appid];
            }
          },
          {
            label: "key",
            textAlign: "center",
            prop: "key",
            showTooltip:true,
          },
          {
            label: "value",
            textAlign: "center",
            prop: "value",
            showTooltip:true,
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            scopeType: "textButton",
            //width:"240px",
            buttonArr: [
              {
                text:"编辑",
                icon: "el-icon-edit",
                isShow: (row) => {
                  return true;
                },
                methods: (row) => {
                  this.editFormData = row;
                  this.title = "编辑配置项";
                  this.show = true;
                },
              },
              {
                text:"删除",
                icon: "el-icon-delete-solid",
                isShow: (row) => {
                  return true;
                },
                methods: (row) => {
                  this.$confirm("确定要删除这条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.delete(row.id);
                    })
                    .catch(() => {});
                },
              },
            ],
          },
        ],
        data: [],
        autoHeight: false,
        maxHeight: "650px",
      },
      formConfig: {
        labelWidth: "80px",
        itemArr: [
          {
            label: "所属租户",
            prop: "appid",
            type: "select",
            span: 24,
            required: true,
          },
          {
            label: "key",
            prop: "key",
            type: "text",
            span: 24,
            required: true,
          },
          {
            label: "value",
            prop: "value",
            type: "text",
            span: 24,
            required: true,
          },
          {
            label: "备注",
            prop: "description",
            type: "textarea",
            span: 24,
            //rows: 3,
            autosize:true,
          },
        ],
      },
      //弹出框表单数据
      editFormData: {},
    };
  },
  watch: {
    selectId: {
      handler(val) {
        this.getTableData(val);
      },
    },
  },
  created() {
    this.getSelectData();
  },
  methods: {
    //所属租户下拉框值改变
    selectChange(val) {
      this.appId = val;
      this.getTableData(this.selectId);
    },
    //新增配置项
    addConfigItem() {
      this.editFormData = {};
      this.title = "新增配置详情";
      this.show = true;
    },
    //表单提交
    async doSubmit() {
      const params = await this.$refs.editForm.getFormData();
      if (this.title == "新增配置详情") {
        params.configId = this.selectId;
        addConfigDetail(params).then(
          (res) => {
            if (res.code == 200) {
              this.$message.success(res.description);
              this.show = false;
              this.getTableData(this.selectId);
            }
          },
          (error) => {
            this.$message.error(error);
          }
        );
      } else {
        updateConfigDetail(params).then(
          (res) => {
            if (res.code == 200) {
              this.$message.success(res.description);
              this.show = false;
              this.getTableData(this.selectId);
            }
          },
          (error) => {
            this.$message.error(error);
          }
        );
      }
    },
    //删除配置项详情
    delete(id) {
      deleteConfigDetail({ id: id }).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.getTableData(this.selectId);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取下拉框数据
    getSelectData() {
      applicationQueryList().then(
        (res) => {
          let arr = res.data.map((item) => {
            const obj = {
              label: item.name,
              value: item.id,
            };
            return obj;
          });
          arr.unshift({ label: "公共", value: "0" });
          arr.forEach(item=>{
            this.appList[item.value] = item.label;
          })
          this.options = arr;
          this.$set(this.tableSettingParam.column[0], "seleteOption", arr);
          this.$set(this.formConfig.itemArr[0], "selectOption", arr);
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取配置项详情
    getTableData(id) {
      const params = {
        appid: this.appId,
        configId: id,
      };
      getConfigDetailList(params).then(
        (res) => {
          if (res.code == 200) {
            this.$set(this.tableSettingParam, "data", res.data);
            res.data.find((i) => i.key == "version" ? localStorage.setItem("version", i.value || "") : "");
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .appSelect {
    text-align: left;
    label {
      margin: 0 10px;
    }
  }
  .action {
    margin: 10px 0;
    text-align: right;
  }
  fieldset {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px #d7dae2 solid;
    padding: 10px 30px;
    margin-top: 10px;
  }
  legend {
    margin-left: 30px;
    text-align: left;
  }
}
</style>
